<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out{
            width: 600px;
            height: 300px;
          /*  outline: 1px red solid;*/
            margin: 100px auto;
        }
        .leftDiv,.rightDiv,.middleDiv{
            width: 200px;
            height: 100%;
            text-align: center;
            float: left;
        }
        #leftsel,#rightsel{
            width: 150px;
            height: 100%;
        }

        button{
            width: 100px;
            height: 30px;
            margin-top: 35px;
        }
    </style>
</head>
<body>

  <div class="out">
      <div class="leftDiv">
          <select name="" id="leftsel" multiple="multiple" size="10">
              <option value="">张三</option>
              <option value="">李四</option>
              <option value="">王五</option>
              <option value="">赵六</option>
              <option value="">孙琦</option>
              <option value="">王都是</option>
          </select>
      </div>
      <div class="middleDiv">
          <button>  >  </button>
          <button>  >>  </button>
          <button>  < </button>
          <button> <<  </button>
      </div>
      <div class="rightDiv">
          <select name="" id="rightsel" multiple="multiple" size="10">

          </select>
      </div>
  </div>

</body>
</html>
<script>
//获取左右的的下拉菜单
let left_sel = document.getElementById('leftsel');
let right_sel = document.getElementById('rightsel');
//获得操作的按钮
let btnList = document.getElementsByTagName('button');

//绑定事件
//选中往右移动
btnList[0].onclick=()=>{

}
//全部往右移动
btnList[1].onclick=()=>{
    //得到所有的选项卡
    let optList = left_sel.options;
    
    
}


</script>